import React, { Component } from 'react';
import Ficalist from './Ficalist/Ficalist';
import './Fication.css'

class Fication extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
            detail:[{title:"华语男",cat:1001},
            {title:"华语女",cat:1002},
            {title:"华语组合",cat:1003},
            {title:"欧美男",cat:2001},
            {title:"欧美女",cat:2002},
            {title:"欧美组合",cat:2003},
            {title:"日本男",cat:6001},
            {title:"日本女",cat:6002},
            {title:"日本组合",cat:6003},
            {title:"韩国男",cat:7001},
            {title:"韩国女",cat:7002},
            {title:"韩国组合",cat:7003},
            {title:"其他男歌手",cat:4001},
            {title:"其他女歌手",cat:4002},
            {title:"其他组合",cat:4003},
        ],
            letter:[{title:"A",initial:"a"},
                    {title:"B",initial:"b"},
                    {title:"C",initial:"c"},
                    {title:"D",initial:"d"},
                    {title:"E",initial:"e"},
                    {title:"F",initial:"f"},
                    {title:"G",initial:"g"},
                    {title:"H",initial:"h"},
                    {title:"I",initial:"i"},
                    {title:"J",initial:"j"},
                    {title:"K",initial:"k"},
                    {title:"L",initial:"l"},
                    {title:"M",initial:"m"},
                    {title:"N",initial:"n"},
                    {title:"O",initial:"o"},
                    {title:"P",initial:"p"},
                    {title:"Q",initial:"q"},
                    {title:"R",initial:"r"},
                    {title:"S",initial:"s"},
                    {title:"T",initial:"t"},
                    {title:"U",initial:"u"},
                    {title:"V",initial:"v"},
                    {title:"W",initial:"w"},
                    {title:"X",initial:"x"},
                    {title:"Y",initial:"y"},
                    {title:"Z",initial:"z"},

        ],
        chilki:null,
        deta:null,
        initial:'',
        cat:'',
        arr:[],
        singer:[]
        }
    }
    

    // 点击字母
    Clickletter(index,initial){
        console.log(index);
        console.log(initial);
        this.setState(state=>{
            return{
                chilki:index,
                initial:initial
            }
        })
        this.Ficalist(this.state.cat,initial)
        }

    // 点击分类
    Clickdeta(index,cat){
        console.log(index);
        console.log(cat);
        this.setState(state=>{
            return{
                deta:index,
                cat:cat 
                }
            })
        this.Ficalist(cat,this.state.initial)        
    }
    componentDidMount(){
        this.Ficalist()
    }
    Ficalist(cat,initial){
        this.$axios([
            {
                url:"http://127.0.0.1:9115/artist/list",
                params:{
                    cat:cat,
                    initial:initial,
                    offset:0
                }
            }
        ]).then(res=>{
            console.log(res[0].artists);
            this.setState(state=>{
                return{
                    singer:res[0].artists
                }
            })
        })
    }

    render() {
        // console.log(this.state.detail);
        // console.log(this.state.letter);
        // var arr = this.state.arr
        // console.log(arr);
        return (
            <div className="wrap">
            <div className="fica-one">
                <p>分类（默认热门）:</p>
                {
                    this.state.detail.map((item,index)=>
                        <div key={index} className={this.state.deta === index ?'activ' :'det'} onClick={this.Clickdeta.bind(this,index,item.cat)}> {item.title}</div>
                    )
                }

                
            </div>
            <div className="fica-two">
                <p>首字母:</p>
                {
                    this.state.letter.map((item,index)=>
                        <div key={index} className={this.state.chilki === index ?'activ' :'det'} onClick={this.Clickletter.bind(this,index,item.initial)}> {item.title}</div>
                    )
                }
            </div>
            <Ficalist singer={this.state.singer} {...this.props}></Ficalist>
            </div>
        );
    }
}

export default Fication;